<template>
	<view class="view1">
		<view class="padding-container">
			<view class="header">
				<text class="header-text">
					<text class="view1_name">{{ item.applyUserName }}</text>
					<text class="margin-left">入会申请</text>
				</text>
				<text class="date-text">{{ formatDateTime(item.createTime, true) }}</text>
			</view>

			<view class="view1_content">
				<view class="phone-container">
					手机号码：
					<span
						class="phone-number">{{ item.eye ? maskedPhoneNumber(item.applyPhone) : item.applyPhone }}</span>
					<uni-icons class="eye-icon" v-show="!item.eye" @click="toggleEye" type="eye-filled"
						size="18"></uni-icons>
					<uni-icons class="eye-icon" v-show="item.eye" @click="toggleEye" type="eye-slash-filled"
						size="18"></uni-icons>
				</view>
				<view class="id-container">身份证号：{{ maskedIdCard(item.applyIdCard) }}</view>
				<view class="employee-status">本单位职工</view>
			</view>
		</view>

		<view class="footer">
			<view class="phone-footer">
				{{applyjoinunionnodeItem(item.presentApprovalNode?item.presentApprovalNode:item.approvalNode) }}
			</view>
			<view class="flex1 text-end transferout" @click="goapprovaldetails(item)">
				<text v-if="activeList == 0" class="transferout-status shenpi">审批</text>
				<text v-else-if="activeList == 1" class="transferout-status yitongguo">已通过</text>
				<text v-else class="transferout-status yibohui">已驳回</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				required: true
			},
			activeList: {
				type: Number,
				default: 0
			},
			applyjoinunionnode: {
				type: Array,
				default: 0
			}
		},
		data() {
			return {
				// applyjoinunionnode:[]
			};
		},

		methods: {

			applyjoinunionnodeItem(row) {
				const matchedItem = this.applyjoinunionnode.find(item => item.dictValue == row);
				return matchedItem ? matchedItem.text : '未知';
			},
			maskedIdCard(idCard) {
				return idCard ? idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') : '';
			},
			maskedPhoneNumber(phone) {
				return phone ? phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') : '';
			},
			formatDateTime(dateTime, includeTime) {
				const options = includeTime ? {
					year: 'numeric',
					month: 'numeric',
					day: 'numeric',
					hour: '2-digit',
					minute: '2-digit'
				} : {
					year: 'numeric',
					month: 'numeric',
					day: 'numeric'
				};
				return new Date(dateTime).toLocaleDateString('zh-CN', options);
			},
			toggleEye() {
				this.item.eye = !this.item.eye;
			},
			goapprovaldetails(item) {
				const url = this.activeList == 0 ?
					`/pages/work/approvaldetails?id=${item.id}` :
					`/pages/work/approvaldetails?id=${item.id}&activeList=${this.activeList}`;
				this.$tab.navigateTo(url);
			},
		}
	};
</script>

<style scoped>
	.view1 {
		display: flex;
		flex-direction: column;
		border-radius: 5px;
	}

	.padding-container {
		padding: 25rpx;
		padding-bottom: 0;
	}

	.header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.header-text {
		font-weight: 700;
	}

	.margin-left {
		margin-left: 20rpx;
	}

	.date-text {
		text-align: right;
		color: rgba(153, 153, 153, 1);
	}

	.view1_content {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10px;
	}

	.phone-container,
	.id-container,
	.employee-status {
	color: #999;
		margin-bottom: 5px;
	}

	.phone-number {
		width: 120rpx;
		display: inline-block;
	}

	.eye-icon {
		margin-left: 30rpx;
	}

	.footer {
		padding: 0 25rpx 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 700;
	}

	.phone-footer {
		color: rgba(51, 51, 51, 1);
	}

	.flex1 {
		display: flex;
		justify-content: flex-end;
	}

	.transferout-status {
		color: #333;
		width: 120rpx;
		height: 60rpx;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
	}

	.transferout-status.pending {
		color: orange;
	}

	.shenpi {
		background: rgba(189, 26, 45, 1);
		color: #fff;
	}

	.yibohui {
		background: rgba(255, 235, 236, 1);
		color: rgba(227, 0, 16, 1);
	}

	.yitongguo {
		background: rgba(236, 255, 194, 1);
		color: rgba(112, 163, 0, 1);
	}
</style>